<template>
    <div id="student-login">
        <div id="baimg">
          <div class="loginbox">
            <div class="imgleft"></div>
            <div class="logoin">
              <div class="logintopimg"></div>
              <div class="loginonbox">
                <el-input class="margin-top" v-model="username" placeholder="请输入账号" size="small" style="width: 230px;"></el-input>
                <el-input class="margin-top" placeholder="请输入密码" v-model="password" size="small" show-password style="width: 230px;"></el-input>
                <el-button class="margin-top logoinbut" type="primary" @click="logonin" round>登录</el-button>
              </div>
            </div>
          </div>
        </div>

    </div>
</template>


<script>
import  http  from "@/components/Student-login/js/http";

export default {
  name: 'studentLogin',
  data () {
    return {
      //username
      username: '',
      password: ''
    }
  },
  methods:{
    logonin(){
      //发送请求请求后台数据
      http.loginfun(this.username,this.password);
    }
  }
}
</script>

<style  scoped>
body{
  width: 100%;
  height: 100%;
}

#baimg{
  width: 100%;
  height: 100%;
  background-image: url(./img/bj.webp);
  background-repeat: no-repeat;
  background-size:cover;
  
  position: absolute;
}
.loginbox{
  width: 600px;
  height: 300px;
  background: white;
  border-radius: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin:-150px 0 0 -300px; 
}
.imgleft{
  width: 330px;
  height: 300px;
  background: blue;
  border-radius: 15px;
  background-image: url(./img/imgleft.webp);
  background-position: 40% 40%;
  position: absolute;
}
.logoin{
  width: 250px;
  height: 300px;
  position: absolute;
  right:  0;
}
.logintopimg{
  width: 250px;
  height: 100px;
  background: url(./img/logo.png) 50% 50% no-repeat;
  background-size: 70% 70%;

}
.logoinbut{
  width: 200px;
  margin-left: 18px;
}

.margin-top{
  margin-top: 20px;
  
}
</style>
